export default {
  data() {
    return {
      tableHeight: null,
      tableScrollTop: 0,
      pageYOffset: 0,
      pageOffsetGroup: []
    }
  },
  watch: {
    '$store.state.tableScroll.pageYOffset': function(val, oldVal) {
      this.pageYOffset = val
      this.setPageScroll()
      const elTapTop = document.getElementsByClassName('el-tabs--top')[0]
      const fixedRight = document.getElementsByClassName(
        'el-table__fixed-right'
      )[0]
      try {
        const Dom = document.getElementsByClassName('el-table')[0]
        if (!Dom) return false
        if (elTapTop) {
          this.lineScrollTop = Dom.offsetTop - 160
        } else {
          this.lineScrollTop = Dom.offsetTop - 75
        }
        if (val < oldVal) {
          this.tableHeight = null
          if (fixedRight) fixedRight.style.right = 0
        } else if (val > this.lineScrollTop) {
          if (fixedRight) fixedRight.style.right = '17px'
          if (elTapTop) {
            this.tableHeight = window.innerHeight - 215
          } else {
            this.tableHeight = window.innerHeight - 130
          }
        }
      } catch (error) {
        console.log(error)
      }
    }
  },
  mounted() {
    this.domChange(() => {
      this.setElTabWidth()
    })
    try {
      if (!this.$refs.scrollTable) return false
      this.dom = this.$refs.scrollTable.bodyWrapper
      this.dom.addEventListener('scroll', this.handlerTableScroll)
    } catch (error) {
      // console.log(error)
    }
  },
  activated() {
    this.setPagePosition()
  },
  methods: {
    handlerTableScroll() {
      this.tableScrollTop = this.dom.scrollTop
    },
    // 记录页面滚动位置
    setPageScroll() {
      const pageYOffset = this.pageYOffset
      let pageOffsetGroup = sessionStorage.getItem('pageOffsetGroup')
      if (pageOffsetGroup) {
        pageOffsetGroup = JSON.parse(pageOffsetGroup)
        this.pageOffsetGroup = pageOffsetGroup
      }
      let flag = false
      this.pageOffsetGroup.forEach(item => {
        if (item.name && item.name === this.$route.name) {
          flag = true
          item.pageYOffset = pageYOffset
        }
      })
      if (!flag) {
        this.pageOffsetGroup.push({
          name: this.$route.name,
          pageYOffset: pageYOffset
        })
      }
      sessionStorage.setItem(
        'pageOffsetGroup',
        JSON.stringify(this.pageOffsetGroup)
      )
    },
    // 根据页面滚动位置记录设置页面滚动
    setPagePosition() {
      this.$nextTick(() => {
        let pageOffsetGroup = sessionStorage.getItem('pageOffsetGroup')
        if (pageOffsetGroup && this.$route) {
          pageOffsetGroup = JSON.parse(pageOffsetGroup)
          pageOffsetGroup.forEach(item => {
            if (item.name === this.$route.name) {
              setTimeout(() => {
                window.scrollTo({
                  top: item.pageYOffset,
                  behavior: 'smooth'
                })
              }, 100)
            }
          })
        }
      })
    },
    // 设置el-tab-pane 宽度 width
    setElTabWidth() {
      const appMain = document.getElementsByClassName('app-main')
      const elTabsTop = document.getElementsByClassName('el-tabs--top')
      if (appMain && elTabsTop && elTabsTop[0]) {
        elTabsTop[0].style.width = appMain[0].offsetWidth - 30 + 'px'
      }
    },
    // 监听app-main DOM属性变化
    domChange(callback) {
      var MutationObserver =
        window.MutationObserver ||
        window.WebKitMutationObserver ||
        window.MozMutationObserver
      // 监测浏览器是否支持
      var observeMutationSupport = !!MutationObserver
      if (!observeMutationSupport) return this.setElTabWidth()
      const targetNode = document.getElementsByClassName('app-main')[0]
      // Options for the observer (which mutations to observe)
      const config = { attributes: true, childList: true, subtree: true }
      // Create an observer instance linked to the callback function
      const observer = new MutationObserver(callback)
      // Start observing the target node for configured mutations
      observer.observe(targetNode, config)
    }
  },
  beforeDestroy() {
    if (this.$refs.scrollTable) {
      this.dom.removeEventListener('scroll', this.handlerTableScroll)
    }
  }
}
